<template>
  <div class="aboutOuter">
    <!-- 面包屑导航 -->
    <div class="aboutTop">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/layout/portal' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>关于管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 标题 -->
    <h3 class="title">关于管理</h3>

    <!-- 内容区 -->
    <div class="about">
      <div class="aboutAddBtn">
        <el-button type="primary" round @click="aboutAdd">新增</el-button>
      </div>
      <div class="about_list">
        <el-table height="400" :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" type="index" index="index" />
          <el-table-column align="center" prop="title" label="关于信息标题" width="230" />
          <el-table-column align="center" prop="content" label="关于信息内容" />
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" circle @click="upAbout(scope.row)" />
              <el-button type="danger" :icon="Delete" circle @click="delAbout(scope.row._id)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 弹框 -->
    <div class="pop">
      <el-dialog v-model="dialogFormVisible" title="新增关于信息">
        <el-form :model="form">
          <el-form-item label="关于信息标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="关于信息内容" :label-width="formLabelWidth">
            <el-input v-model="form.content" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="popConfog">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ArrowRight, Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import {
  addAboutApi,
  findAboutApi,
  updateAboutApi,
  delAboutApi
} from '../../service/apiModule/aboutApi'

onMounted(() => {
  getAbout()
})

// 分类列表数据
const tableData = ref([
  {
    title: "",
    content: '',
    _id: "",
  },
]);

const getAbout = async () => {
  const { data: res } = await findAboutApi()
  tableData.value = res.data
}

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  id: '',
  title: "",
  content: ''
})

let isAdd = true

// 新增
const aboutAdd = () => {
  isAdd = true
  dialogFormVisible.value = true
}

// 修改
const upAbout = (data: any) => {
  form.title = data.title
  form.content = data.content
  form.id = data._id

  isAdd = false

  dialogFormVisible.value = true
}

// 删除
const delAbout = async (id: String) => {
  const { data: res } = await delAboutApi({ id })
  if (res.status.code !== 200) {
    ElMessage.error('删除失败!')
  } else {
    ElMessage.success('删除成功!')
    getAbout()
  }
}

// 清空
const clearForm = () => {
  form.content = ''
  form.title = ''
  form.id = ''
}

// 弹框确定
const popConfog = async () => {
  if (form.title === '' || form.content === '') {
    ElMessage.info('标题或内容不可为空!')
  } else {
    if (isAdd) {
      const { data: res } = await addAboutApi(form)
      if (res.status.code !== 200) {
        if (res.status.code === 2010) {
          ElMessage.info('已存在!')
        } else {
          ElMessage.error('新增失败!')
        }
      } else {
        ElMessage.success('添加成功!')
        dialogFormVisible.value = false
        clearForm()
        getAbout()
      }
    } else {
      const { data: res } = await updateAboutApi(form)
      if (res.status.code !== 200) {
        ElMessage.error('修改失败!')
      } else {
        ElMessage.success('修改成功!')
        clearForm()
        getAbout()
        dialogFormVisible.value = false
      }

    }
  }
}

</script>

<style lang="scss" scoped>
$H: 91vh;

.aboutOuter {
  width: 100%;
  height: $H;
  background-color: rgb(243, 243, 243);
  padding: 20px;

  .aboutTop {
    width: 100%;
    background-color: rgba(255, 255, 255, .6);
    padding: 10px 10px;
    border-radius: 10px;
  }

  .title {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .about {
    background-color: #fff;
    padding: 10px 0 0 10px;
    border-radius: 10px;
    min-height: 60%;
    max-height: 86%;

    .aboutAddBtn {
      margin: 30px 0 10px 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding-right: 30px;
    }

    // .about_list {}
  }
}
</style>